<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
1. 计算属性
  在computed属性对象中定义计算属性的方法
  在页面中使用{{方法名}}来显示计算的结果
2. 监视属性:
  通过通过vm对象的$watch()或watch配置来监视指定的属性
  当属性变化时, 回调函数自动调用, 在函数内部进行计算
3. 计算属性高级:
  通过getter/setter实现对属性数据的显示和监视
  计算属性存在缓存, 多次读取只执行一次getter计算
-->
<div id="demo">
    姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
    名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
    <!--fullName1是根据fistName和lastName计算产生-->
    姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
    姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
    姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>
  
    <p>{{fullName1}}</p>
    <p>{{fullName1}}</p>
  </div>

  <script type="text/javascript" src="../js/vue.js"></script>
  <script>
      const p={

          firstName:"H",
          lastName:"J"
      }
      Object.defineProperty(p,'fullName',{
          /*
            当读取函数值的时候自动调用，将函数的返回值作为属性值，this是属性所在的对象
          */
          get(){
            return this.firstName+'-'+this.lastName
          },
           /*
            当修改了函数值的时候自动调用，用来监视属性值的变化，this是属性所在的对象
          */
          set(value){//value是fullName最新的值
          //更新firstName/lastName
          const names=value.split('-')
            this.firstName=names[0]
            this.lastName=names[1]
          }
      })
     // p.fullName=p.firstName+'-'+p.lastName
    p.firstName='h';
    p.lastName='d';
    console.log(p.fullName);
    p.fullName='H-B'//导致对应的set调用
    console.log(p.firstName,p.lastName);
  </script>
</body>
</html>